<template>
  <div ref="mapContainer" class="map-container"></div>
</template>

<script>
import * as echarts from 'echarts'
import chinaJson from '@/assets/map/china.json'

export default {
  name: 'ScenicMap',
  data() {
    return {
      chart: null,
      mapData: [
        { name: '北京', value: 11 },
        { name: '天津', value: 1 },
        { name: '河北', value: 12 },
        { name: '山西', value: 8 },
        { name: '内蒙古', value: 5 },
        { name: '辽宁', value: 4 },
        { name: '吉林', value: 5 },
        { name: '黑龙江', value: 3 },
        { name: '上海', value: 2 },
        { name: '江苏', value: 24 },
        { name: '浙江', value: 12 },
        { name: '安徽', value: 11 },
        { name: '福建', value: 9 },
        { name: '江西', value: 7 },
        { name: '山东', value: 13 },
        { name: '河南', value: 11 },
        { name: '湖北', value: 9 },
        { name: '湖南', value: 22 },
        { name: '广东', value: 9 },
        { name: '广西', value: 5 },
        { name: '海南', value: 2 },
        { name: '重庆', value: 8 },
        { name: '四川', value: 14 },
        { name: '贵州', value: 6 },
        { name: '云南', value: 8 },
        { name: '西藏', value: 1 },
        { name: '陕西', value: 11 },
        { name: '甘肃', value: 7 },
        { name: '青海', value: 2 },
        { name: '宁夏', value: 3 },
        { name: '新疆', value: 5 },
        { name: '台湾', value: 0 },
        { name: '香港', value: 0 },
        { name: '澳门', value: 0 }
      ]
    }
  },
  mounted() {
    echarts.registerMap('china', chinaJson)
    this.initChart()
    window.addEventListener('resize', this.resizeChart)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeChart)
    this.chart && this.chart.dispose()
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.mapContainer, null, {
        renderer: 'canvas'
      })
      this.updateChart()
    },
    updateChart() {
      const option = {
        backgroundColor: 'transparent',
        title: {
          text: '5A级景区地理分布',
          subtext: '数据来源：文化和旅游部',
          left: 'center',
          textStyle: {
            color: '#8B4513',
            fontSize: 16,
            fontWeight: 'normal'
          },
          subtextStyle: {
            color: '#8B4513',
            fontSize: 12
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>5A级景区数量：{c}个',
          backgroundColor: 'rgba(255, 255, 255, 0.9)',
          borderColor: '#8B4513',
          textStyle: {
            color: '#8B4513'
          }
        },
        visualMap: {
          min: 0,
          max: 5,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'],
          inRange: {
            color: ['#FFE4C4', '#8B4513']
          },
          textStyle: {
            color: '#8B4513'
          }
        },
        series: [
          {
            name: '5A级景区数量',
            type: 'map',
            map: 'china',
            roam: true,
            emphasis: {
              label: {
                show: true,
                color: '#fff'
              },
              itemStyle: {
                areaColor: '#8B4513'
              }
            },
            data: this.mapData
          }
        ]
      }
      this.chart.setOption(option)
    },
    resizeChart() {
      this.chart && this.chart.resize()
    }
  }
}
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
}
</style> 